<template>
	<div class="app-columns-container flexrbc">
		<div class="app-right-container scroll-vertical-visbar">
			<div class='laws-menu pointer ellipsis' @click="changeSelect(index)"
				:class="[currentIndex== index?'current-selected':'']" v-for="(item,index) in laws">{{item.title}}</div>
		</div>
		<div class="app-left-container">
			<div class='laws-title clamp2'>{{currentTitle}} </div>
			<div class='laws-content scroll-vertical-visbar'>
				<div v-for='item in currentContent'>{{item.text}}</div>
			</div>
			<div class="for-all">显示全部</div>
		</div>
	</div>
</template>

<script>
	import lawsData from "../json/laws.js"; 
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		name:'lawsIndex',
		components: {},
		data() {
			return {
				currentIndex: 0,
				currentTitle: '',
				currentContent: [],
				laws: lawsData
			};
		},
		created() { },
		mounted() {
			this.currentTitle = this.laws[this.currentIndex].title;
			this.currentContent = this.laws[this.currentIndex].content;
		},
		methods: {
			changeSelect(i) {
				this.currentIndex = i;
				this.currentTitle = this.laws[this.currentIndex].title;
				this.currentContent = this.laws[this.currentIndex].content;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/styles/variables.scss";

	.app-right-container {
		height: 100%;
		padding: 12px !important;
		.laws-menu {
			width: 100%;
			padding: 12px !important;
			line-height: 28px;
			border-radius: 4PX;
			border-bottom: 1px solid $primaryColor;
			color: $mainTextColor;
		}

		.current-selected {
			color: $menuActiveText !important;
			background: $primaryColor !important;
		}
	}

	.app-left-container {
		background: $moduleBg;
		padding: 12px !important;
		overflow: hidden;
		position: relative;
		.for-all{
			color:#fff;
			position: absolute;
			bottom:60px;
			right: 60px;
			background:$primaryColor;
			color: #fff;width: 100px;
			height: 46px;
			line-height: 46px;
			text-align: center;
			border-radius: 6px;
		}
		.laws-title {
			width: 100%;
			line-height: 42px;
			height: 84px;
			color: $menuActiveText;
		}

		.laws-content {
			width: 100%;
			line-height: 32px;
			height: calc(100% - 84px);
			overflow: hidden;
			overflow-y: auto;
			text-indent: 2em;
		}

	}
</style>